<template>
  <div class="card">
    <div class="card-hd">
      <span class="name">水电气暖报装申请表</span>
      <span class="type">（个人）</span>
    </div>
    <div class="card-bd">
      <van-button type="primary" class="btn-small btn-warning" round url="#/bzsq-gr">报装申请</van-button>
    </div>
  </div>
  <div class="card card-bus">
    <div class="card-hd">
      <span class="name">水电气暖报装申请表</span>
      <span class="type">（企业、单位）</span>
    </div>
    <div class="card-bd">
      <van-button type="primary" class="btn-small btn-primary" round>报装申请</van-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Button as VanButton } from "vant";
export default defineComponent({
  name: "Bzsq",
  components: {
    VanButton,
  },
  setup() {
    const router = useRouter();
    const openWin = (name: any) => {
      router.push({
        name: name,
      });
    };
    return {
      openWin,
    };
  },
});
</script>

<style scoped lang="scss">
@import "~@/assets/scss/pub.scss";
.card {
  margin: pxToVw(30) auto 0 auto;
  width: pxToVw(703);
  height: pxToVw(230);
  background: url("~@/assets/img/bz-personal.png") no-repeat;
  background-size: cover;
  padding-top: pxToVw(50);
  padding-left: pxToVw(30);
  .card-hd {
    font-size: pxToVw(32);
    line-height: pxToVw(42);
    .name {
      color: #333333;
    }
    .type {
      color: #ff5a00;
    }
  }
  .btn-warning {
    background-color: #ff5a00;
  }
  .card-bd{
    padding-top: pxToVw(30);
  }
}

.card-bus{
  background: url("~@/assets/img/bz-enterprise.png") no-repeat;
  background-size: cover;
  .card-hd{
    .type{
      color: #2cbe9c;
    }
  }
}
</style>
